<template>
  <div>
    <el-button @click="open">新增</el-button>
    <el-table
      :data="students"
      stripe
      style="width: 50%">

      <el-table-column
        prop="sid"
        label="学号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="sname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        :formatter="formatSex">
      </el-table-column>
      <el-table-column
        prop="major"
        label="专业">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="warning"
            size="small">
            删除
          </el-button>
      </template>
      </el-table-column>
    </el-table>

    <!-- 弹出 增加，删除-->
    <el-dialog  :visible.sync="dialogFormVisible" @close="clear">
        <el-form :model="student"  ref="student">
            <el-form-item label="学号" :label-width="formLabelWidth">
                <el-input v-model="student.sid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="sname">
                <el-input v-model="student.sname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
                <el-radio v-model="student.gender" label="1">先生</el-radio>
                <el-radio v-model="student.gender" label="0">小姐</el-radio>
            </el-form-item>
            <el-form-item label="专业" :label-width="formLabelWidth" prop="major">
                <el-select v-model="student.major" placeholder="请选择书本类型">
                    <el-option label="外语" value="外语" ></el-option>
                    <el-option label="计算机" value="计算机" ></el-option>
                    <el-option label="机械工程" value="机械工程" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                <el-input v-model="student.age" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      dialogFormVisible: false, //对话框的 可见性
      formLabelWidth: '50px', //表单标签的宽度
      students:[],
      student:{
        sid:null,
        sname:'',
        gender:'',
        major:'',
        age:'',
        deleted:0
      },  //获取表单中用户填写的学生信息
    }
  },
  methods:{
    formatSex(row){
      return row.gender==1?'男':'女'
    },

    all(){
      let _this = this
      axios.get('http://localhost:8888/student/all')
      .then(function(rs){
        _this.students = rs.data
      })
    },

    handleDelete(index, row) {
      let _this = this
      
      this.$confirm('此操作将永久删除id为' + row.sid + ',是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'  //警告图标
                    })
                    .then(() => {        
                        let url = 'http://localhost:8888/student/delete/' + row.sid;                        
                        axios.delete(url)
                             .then(r => {                                           
                                            this.$message({
                                                type: 'success',
                                                message: '删除成功!'
                                            });
                                            //删除后，刷新表格
                                            _this.all()
                        })          
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
    },

    //打开窗体的方法
    open(idx, row) {
            this.dialogFormVisible = true  //显示对话框
            if (row) {                
                this.student.sid = row.sid
                this.student.sname = row.sname
                this.student.gender = row.gender
                this.student.major = row.major
                this.student.age = row.age
            }
        },
    
    //编辑or添加
    doSave() { 
            // if (this.title == '编辑') {
            //     let url = 'http://localhost:8888/add'
            //     let student = this.student
            //     let _this = this
            //     axios.put(url,student)
            //          .then(r=>{
            //             //添加后，刷新表格
            //             _this.all()
            //          })
            // }
            // else{
            //     //添加
               
            // }                
            let url = 'http://localhost:8888/student/add'
            let student = this.student
            let _this = this
            axios.post(url,student)
                  .then(r=>{
                    //添加后，刷新表格
                    _this.all()
                  })
        this.clear()  //关闭弹窗


        },

    //窗体的善后
    clear() {
            this.dialogFormVisible = false;            
            this.student = {
                                sid: '',
                                sname: '',
                                gender: '',
                                major: '',
                                age:0,
                                deleted:0
                            }
    },

  },
  
  created(){
    this.all()
  },
}
</script>

<style>

</style>